<template>
  <div>
    <div class="detail-top">
      <div class="detail-whole">
        <div class="accumulate-title">累计成交订单<span>{{order_total}}</span>笔订单</div>
        <div class="xloop-schedule">
          <div class="xloop-flex schedule-head">
            <div v-for="(index) in 9" :key="index" class="head-img">
              <div v-if="accumulate[index-1] && accumulate[index-1].headimgurl" class="active-bg" :class="accumulate[index-1] && accumulate[index-1].is_crown ? 'active-bg-loop' : ''">
                <!-- <img class="active-bg" :src="accumulate[index].is_crown ? 'https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-vector-active.png': 'https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-vector.png'"> -->
                <img :src="accumulate[index-1].headimgurl" class="avatar">
                <img v-if="accumulate[index-1] && accumulate[index-1].is_crown" class="loop-king" src="https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-king.png">
              </div>
              <img v-else class="gift" src="https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-gift.png">
            </div>
            <div class="head-img">
              <img class="gift" src="https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-gift.png">
            </div>
          </div>
          <div class="xloop-flex progress-bar">
            <div class="bar-whole" :class="index <= accumulate.length ? 'bar-active' : 'bar'" v-for="(index) in 10" :key="index">
              <template v-if="index == accumulate.length" > 
                <img class="fire" src="https://img.wifenxiao.com/h5-wfx/images/xloop/loop-fire.png">
                <div class="color-bg"></div>
                <div class="fire-percentage">{{progress}}%</div>
              </template>
              <p v-else></p>
            </div>
          </div>
          <div class="encourage">{{Number(progress) >= 100 ? '恭喜' : ''}}你已完成<span>{{progress}}%</span>！{{Number(progress) >= 100 ? '太棒啦！' : '加油哦！'}}</div>
          <div class="share-btn" @click="clickShare">分享好友</div>
        </div>
      </div>
    </div>
    <xloop-order :loopNum="max_circle" @loopNum="loopNum"  :orderDetail="order_detail" />
    <share-image ref="shareImage"></share-image>

  </div>
</template>
<script>
import xloopOrder from './components/xloopOrder'
import { LoopDetailStatistics, LoopDetailOrder } from '@/api/user/xLoop/index'
import { mpShare} from '@/utils/utils'
import shareImage from '@/components/wxShare/shareImage'

export default {
  components: {
    xloopOrder,
    shareImage
  },
  data() {
    return {
      accumulate: [],
      order_total: 0,
      progress: '',
      order_detail: [],
      max_circle: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      LoopDetailStatistics({ id: this.$route.query.loopId }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.accumulate = res.data.head_list
          this.order_total = res.data.order_total
          this.progress = res.data.progress
          this.max_circle = res.data.max_circle
          this.orderDetail(res.data.max_circle)
          // TODO 小程序分享
          const option = {
            title: res.data.jsapi_desc,
            imgUrl: res.data.jsapi_img,
            shareParam: res.data.jsapi_url.split('?')[1]
          }
          // console.log('option', option)
          mpShare (true, true, '/pages/shopIndex/index', option,'/index')

        } else {
          this.$Error(res.msg)
        }
      })
    },
    orderDetail(circle) {
      this.$loadingWrap.show()
      LoopDetailOrder({ id: this.$route.query.loopId, circle }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.order_detail = res.data.list
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 点击立即分享
    clickShare() {
      this.$refs.shareImage.showShade = true
    },
    loopNum(num) {
      // console.log('num', num)
      this.orderDetail(num)
    }
  }
}
</script>
<style lang="scss">
.detail-top {
  background: linear-gradient(180deg, #FE754F 0%, #FD4149 100%);
  padding: 16px;
  .detail-whole {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    .accumulate-title {
      text-align: center;
      color: #333;
      font-size: 32px;
      margin-bottom: 46px;
      font-weight: 500;
      span {
        color: #FD4149;
      }
    }
    .xloop-schedule {
      .xloop-flex {
        display: flex;
        align-items: center;
        justify-content: space-around;
        &.schedule-head {
          height: 72px;
          .head-img {
            width: 20%;
            text-align: center;
            .gift {
              width: 40px;
              height: 40px;
            }
            .active-bg {
              height: 72px;
              width: 60px;
              text-align: center;
              background: url('https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-vector.png') center center no-repeat;
              background-size: 100% 100%;
              position: relative;
              &.active-bg-loop {
                background: url('https://img.wifenxiao.com/h5-wfx/images/xloop/xloop-vector-active.png') center center no-repeat;
                background-size: 100% 100%;
              }
              .avatar {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                position: relative;
                top: 6px;
                left: 1px;
              }
              .loop-king {
                position: absolute;
                width: 40px;
                height: 40px;
                top: -20px;
                right: -10px;
              }
            }
          }
        }
        &.progress-bar {
          height: 16px;
          // border-radius: 8px;
          margin-top: 22px;
          .bar-whole {
            width: 100%;
            position: relative;
            height: 16px;
            &:first-child {
              border-top-left-radius: 8px;
              border-bottom-left-radius: 8px;
            }&:last-child {
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;
            }
            &.bar {
              background: #ffeeef;
              p {
                background:#FFAAB1;
              }
            }
            &.bar-active {
              background: #fe6e52;
              p {
                background:#fff;
              }
            }
            p {
              width: 12px;
              height: 12px;
              border-radius:50%;
              position: relative;
              left: 50%;
              margin-left: -6px;
              top: 2px;
            }
            .fire {
              width: 32px;
              height: 32px;
              left: 50%;
              position: absolute;
              margin-left: -18px;
              bottom: -4px;
              z-index: 4;
            }
            .fire-percentage {
              position: absolute;
              color: #FD4149;
              top: 20px;
              font-size: 24px;
              line-height: 140%
            }
            .color-bg {
              width: 50%;
              position: absolute;
              height: 16px;
              background: #ffeeef;
              right: 0;
              top: 0;
            }
          }
        }
      }
      .encourage {
        font-weight: 500;
        font-size: 40px;
        margin: 66px 0 48px 0;
        line-height: 140%;
        text-align: center;
        span {
          color: #FD4149;
        }
      }
      .share-btn {
        width: 100%;
        padding: 24px 32px;
        text-align: center;
        font-size: 32px;
        background: linear-gradient(90deg, #FE754F -0.78%, #FD4149 99.06%), linear-gradient(92deg, #00ADBD 1.71%, #04C1AB 98.29%);
        border-radius: 360px;
        color: #fff;
      }
    }
  }
}
</style>